<template>
	<view class="empty-state">
		<view class="empty-icon">
			<text class="icon-text">{{ icon }}</text>
		</view>
		<text class="empty-title">{{ title }}</text>
		<text class="empty-description">{{ description }}</text>
		<view v-if="showButton" class="empty-actions">
			<view class="action-button" @click="handleButtonClick">
				<text class="button-text">{{ buttonText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'EmptyState',
		props: {
			// 图标
			icon: {
				type: String,
				default: '📭'
			},
			// 标题
			title: {
				type: String,
				default: '暂无数据'
			},
			// 描述
			description: {
				type: String,
				default: '当前没有相关内容'
			},
			// 是否显示按钮
			showButton: {
				type: Boolean,
				default: false
			},
			// 按钮文本
			buttonText: {
				type: String,
				default: '重新加载'
			}
		},
		methods: {
			handleButtonClick() {
				this.$emit('button-click')
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: $spacing-xxl;
	text-align: center;
	min-height: 400rpx;
}

.empty-icon {
	margin-bottom: $spacing-lg;
}

.icon-text {
	font-size: 120rpx;
	opacity: 0.3;
}

.empty-title {
	font-size: $font-size-lg;
	font-weight: 600;
	color: $text-secondary;
	margin-bottom: $spacing-sm;
}

.empty-description {
	font-size: $font-size-base;
	color: $text-muted;
	line-height: 1.5;
	margin-bottom: $spacing-lg;
	max-width: 500rpx;
}

.empty-actions {
	display: flex;
	justify-content: center;
}

.action-button {
	padding: $spacing-md $spacing-xl;
	background: $primary-color;
	border-radius: $border-radius-base;
	transition: $transition-base;
	
	&:active {
		background: $primary-dark;
		transform: scale(0.98);
	}
}

.button-text {
	font-size: $font-size-base;
	font-weight: 500;
	color: $text-white;
}
</style>